<template>
  <div class="index" :class="'theme-'+theme">
    <!-- 验证码需要 -->
    <div v-transfer-dom>
      <x-dialog v-model="showDialog" class="dialog-demo">
        <div class="dialog-container">
          <span @click="handleDialogClose" class="vux-close"></span>
          <div class="dialog-title">通道注册验证</div>
          <div class="dialog-tips">已发送短信验证码到手机</div>
          <div class="verify-code">
            <x-input
              title
              class="verification-code-input"
              placeholder="请输入验证码"
              :max="10"
              :min="4"
              :show-clear="false"
              v-model="verification_code"
            ></x-input>
          </div>
          <div class="submit-code bg-color" @click="submitCode">提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交</div>
          <div class="foot-tips" @click="cannotGetCode">收不到验证码？</div>
        </div>
      </x-dialog>
    </div>

    <div class="container">
      <div class="bankcard-list" v-if="card_list.length !==0">
        <div
          class="bankcard-cell card-watermark"
          :class="'icon-watermark-'+ card.bankName"
          v-for="card in card_list"
          :key="card.id"
        >
          <div class="card-title">
            <i class="bank-icon" :class="'bank-icon-'+ card.bankName"></i>
            <span class="bank-name" v-html="card.bankName"></span>
            <i class="card-edit bg-color" @click="editCard(card)"></i>
          </div>
          <div class="card-description">
            <div class="card-number" v-html="formatCardNo(card.cardNo)"></div>
            <div class="card-sever">
              <span class="bill-date btn-color border-color">账单日
                <span v-html="card.billDay || '0'"></span>日
              </span>
              <span class="repay-date btn-color border-color">还款日
                <span v-html="card.repaymentDay || '0'"></span>日
              </span>
            </div>
          </div>
          <div class="card-management">
            <div class="card-unbind" @click="unbindCard(card)">解绑</div>
            <div class="card-repay" @click="repalyCard(card)">预约还款</div>
            <div class="card-plan" @click="planCard(card)">预约列表</div>
          </div>
        </div>
      </div>
      <div class="no-card" v-else>
        <div class="no-card-img-box">
          <img class="no-card-img" src="../../../static/img/no-card.png" alt="图片加载失败！">
        </div>
        <div>添加银行卡</div>
        <div>即可享受安全便捷的移动还款体验</div>
      </div>
      <div class="bankcard-add btn-color border-color" @click="handleAddBankcard">
        <span>
          <span class="plus-icon">+</span> 添加信用卡
        </span>
      </div>
    </div>
    <group>
      <popup-picker
        :show.sync="showPopupPicker"
        :show-cell="false"
        @on-change="handleChannelChange"
        title="通道选择"
        :data="channelList"
        v-model="channelTag"
      ></popup-picker>
    </group>
  </div>
</template>

<script>
import {
  PopupPicker,
  XInput,
  XDialog,
  TransferDomDirective as TransferDom
} from "vux";

export default {
  name: "index",
  data() {
    return {
      verification_code: "",
      showDialog: false,
      showPopupPicker: false,
      theme: "407",
      passInfo: false,
      userRate: 0,
      currentCard: null,
      channelTag: [],
      card_list: [],
      channelList: []
    };
  },
  directives: { TransferDom },
  components: { XInput, XDialog, PopupPicker },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      // 获取url的用户userid 保存到store
      let token =
        this.$route.params.token || this.$route.query.token || "no-token";
      sessionStorage.setItem("token", encodeURI(token));
      this.getUserInfo();
      this.getBankcardList();
    },
    getChannelList() {
      this.$vux.loading.show();
      let url = `user/channel/query/all`;
      let params = `userId=${sessionStorage.getItem('userid')}`
      this.$Http
        .post(url, params)
        .then(res => {
          this.$vux.loading.hide();
          if (res.data.resp_code === "000000") {
            if (res.data.result.length === 0) {
              this.$vux.alert.show({
                title: "温馨提示",
                content: "无可用通道！请联系客服！"
              });
              return;
            }
            this.showPopupPicker = true;
            // 过滤落地商户
            this.channelList = [
              res.data.result.filter(cell=>cell.channelMerType === '2').map(item => {
                  return {
                    name: item.name + "-" + (item.rate * 100).toFixed(2) + "%",
                    value: item.id
                  };
              })
            ];
          } else {
            // 获取费率失败
            this.$vux.alert.show({
              title: "温馨提示",
              content: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "出错啦",
            content: "获取通道信息失败！请重新尝试！"
          });
        });
    },
    // 无法获取验证码
    cannotGetCode() {
      this.$vux.alert.show({
        title: "温馨提示",
        content: "无法获取验证码！请联系客服！"
      });
    },
    // 提交验证码
    submitCode() {
      if (this.verification_code === "" || this.verification_code === null) {
        this.$vux.alert.show({
          title: "温馨提示",
          content: "请输入收到的验证码"
        });
        return;
      }
      let token = sessionStorage.getItem("token");
      let url = `user/bind/bindCardConfirm/${token}`;
      let params = `smsCode=${this.verification_code}&bankCode=${
        this.currentCard.cardNo
      }`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.showDialog = false;
          }
          this.$vux.alert.show({
            title: "温馨提示",
            content: res.data.resp_message
          });
        })
        .catch(err => {
          this.$vux.alert.show({
            title: "温馨提示",
            content: "服务器繁忙！提交验证码失败！"
          });
        });
    },
    // 关闭验证码窗口
    handleDialogClose() {
      const _this = this;
      this.$vux.confirm.show({
        title: "温馨提示",
        content: "您还没有完成验证码校验，确定要离开吗？",
        onConfirm() {
          _this.showDialog = false;
        }
      });
    },
    formatCardNo(cardNo) {
      if (cardNo === null) {
        return "null";
      }
      cardNo = "" + cardNo;
      return cardNo.slice(0, 4) + " **** **** " + cardNo.slice(-4);
    },
    getUserInfo() {
      // 根据id获取用户数据
      let token = sessionStorage.getItem("token");
      let url = "user/info/query/" + token;
      this.$Http
        .post(url)
        .then(res => {
          // 获取用户的数据。。。
          if (res.data.resp_code === "000000") {
            let value = { ...res.data.result };
            console.log("用户信息", value);
            sessionStorage.setItem("brandId", value.brandId);
            sessionStorage.setItem("userid", value.userid);

            // this.getRate(value.userid);
            this.passInfo = true;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.data.resp_message
            });
          }
        })
        .catch(err => {
          // console.log("请求数据失败", err);
          this.$vux.alert.show({
            title: "提示",
            content: "获取用户数据失败！"
          });
        });
    },
    getBankcardList() {
      this.$vux.loading.show({
        text: "Loading"
      });
      let token = sessionStorage.getItem("token");
      const url = `user/bank/query/userid/${token}`;
      // channel_tag type
      this.$Http
        .get(url)
        .then(res => {
          this.$vux.loading.hide();
          if (res.data.resp_code === "000000") {
            this.card_list = res.data.result.filter(item => {
              return item.cardType === "0";
            });
          } else {
            this.$vux.alert.show({
              content: res.data.resp_message,
              title: "提示"
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            content: "获取用户银行卡列表失败！",
            title: "提示"
          });
        });
    },
    editCard(card) {
      // 根据点击的id 修改对应的银行卡信息
      this.$router.push({
        name: "updateCard",
        meta: { title: "修改卡信息" },
        params: { card }
      });
    },
    unbindCard(card) {
      // 根据获取的id 解绑对应的银行卡
      let _this = this;
      this.$vux.confirm.show({
        title: "提示",
        content: "您确定要解绑当前银行卡吗？",
        onConfirm() {
          _this.gounbindcard(card);
        }
      });
    },
    submitVerify() {
      // 判断卡的信息 校验信⽤卡，查询通道是否注册，是否绑卡
      const channelId = this.channelTag[0];
      let url = "creditcardmanager/verify/card/isuserable",
        params = `creditCardNumber=${this.currentCard.cardNo}&userId=${this.currentCard.userId}&channelId=${channelId}`;
      this.$Http
        .post(url, params)
        .then(res => {
          this.$vux.loading.hide();
          if (res.data.resp_code === "000000") {
            this.$router.push({
              name: "repaymentPlan",
              meta: { title: "生成还款计划" },
              params: { card: this.currentCard, channelId }
            });
          } else if (res.data.resp_code === "000022") {
            this.showDialog = true;
          } else {
            this.$vux.alert.show({
              title: "温馨提示",
              content: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "温馨提示",
            content: "服务器繁忙！验证银行卡失败！"
          });
        });
    },
    handleChannelChange(value) {
      // 校验通道是否支持信用卡
      this.$vux.loading.show({ text: "校验中……" });
      const bankAbbr = this.currentCard.bankAbbr || "";
      const url = `user/bank/supportChannel`;
      const params = `bankAbbr=${bankAbbr}&channelId=${value[0]}`;
      this.$Http
        .get(url + "?" + params)
        .then(res => {
          if (res.data.resp_code === "000000" && res.data.result) {
            this.submitVerify();
          } else {
            this.$vux.loading.hide();
            this.$vux.alert.show({
              title: "温馨提示",
              content: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "温馨提示",
            content: "服务器繁忙！验证银行卡失败！"
          });
        });
    },
    repalyCard(card) {
      this.currentCard = card;

      // this.$router.push({
      //   name: "repaymentPlan",
      //   meta: { title: "生成还款计划" },
      //   params: { card:this.currentCard,channelId:0 }
      // });
      // return

      this.getChannelList();
      // 获取通道信息
    },
    planCard(card) {
      // 计划列表
      this.$router.push({
        name: "repaymentPlanList",
        meta: { title: "计划列表" },
        params: { cardNo: card.cardNo }
      });
    },
    gounbindcard(card) {
      this.$vux.loading.show();
      const token = sessionStorage.getItem("token");
      let url = "user/bank/del/" + token,
        params = `cardno=${card.cardNo}&type=0`;
      this.$Http
        .post(url, params)
        .then(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "温馨提示",
            content: res.data.resp_message
          });
          if (res.data.resp_code === "000000") {
            this.getBankcardList();
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "温馨提示",
            content: "删除失败！"
          });
        });
    },
    h5Plan() {},
    handleAddBankcard() {
      this.JSbackAddCard();
    },
    JSbackAddCard() {
      // IOS和android采用了不同的JS交互方式 这里区分
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      if (!isAndroid) {
        window.WebViewJavascriptBridge.callHandler(
          "backAddCard",
          null,
          function(response) {
            showResponse(response);
          }
        );
      } else {
        window.android.invokeMethod(7, [true]);
      }
    }
  }
};
</script>
<style scoped>
.index {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: 2rem;
  font-size: 1rem;
  background-color: #ffffff;
}
.container {
  box-sizing: border-box;
  padding: 0.8125rem 1.25rem;
}
.no-card {
  box-sizing: border-box;
  padding-top: 7.4375rem;
  text-align: center;
  font-size: 0.75rem;
  color: #aaaaaa;
  line-height: 1.0625rem;
}
.no-card-img {
  width: 9.1875rem;
  height: 5.5625rem;
  margin-bottom: 1.6875rem;
}
.bankcard-cell {
  width: 100%;
  height: 11.25rem;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0 9px 28px 0 rgba(193, 193, 193, 0.26);
  border-radius: 2px;
  margin-bottom: 1.4375rem;
  padding: 0.8125rem 0.9375rem 0.5rem;
  position: relative;
}
.card-watermark {
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 10rem 10.8125rem;
}
.card-edit {
  position: absolute;
  height: 1.5625rem;
  width: 1.5625rem;
  right: 0;
  top: 0;
  background: url(../../../static/img/penceil.png) no-repeat;
  background-position: center;
  background-size: 66% 66%;
  border-radius: 50%;
  overflow: hidden;
  background-color: #8b4dbd;
}
.card-title {
  display: flex;
  justify-content: flex-start;
  align-items: centre;
  position: relative;
}
.bank-name {
  display: flex;
  align-items: center;
  font-size: 1.0625rem;
}
.bank-icon {
  display: inline-block;
  height: 2.0625rem;
  width: 2rem;
  box-sizing: border-box;
  margin-right: 0.625rem;
  background-repeat: no-repeat;
  background-size: 90% 90%;
  background-position: center center;
}
.card-description {
  box-sizing: border-box;
  padding-top: 0.625rem;
}
.card-number {
  padding-left: 0.25rem;
  padding-bottom: 2.1875rem;
}
.card-sever {
  padding-left: 0.25rem;
  height: 1.25rem;
  padding-bottom: 0.9375rem;
}
.bill-date,
.repay-date {
  padding: 0 0.625rem;
  border: 1px solid #8b4dbd;
  border-radius: 2px;
  color: #8b4dbd;
  text-align: left;
  height: 1.25rem;
  font-size: 0.6875rem;
}
.card-management {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 1.5rem;
  font-size: 0.75rem;
  color: #626262;
}
.card-unbind {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dbdbdb;
  border-radius: 100px;
  width: 3.125rem;
  height: 1.5rem;
  box-sizing: border-box;
  margin-right: 1rem;
}
.card-repay {
  margin-right: 1rem;
}
.card-repay,
.card-plan {
  height: 1.0625rem;
  line-height: 1.0625rem;
}
.bankcard-add {
  height: 3.0625rem;
  width: 100%;
  border: 1px solid #8b4dbd;
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.3125rem;
  color: #8b4dbd;
  margin-top: 2.5rem;
}
.bankcard-add > span {
  display: flex;
  align-items: center;
}
.plus-icon {
  display: inline-block;
  font-size: 1.75rem;
  padding-bottom: 0.1rem;
  padding-right: 0.4rem;
}
.rate-info {
  height: 2.75rem;
  line-height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.75rem;
  position: fixed;
  top: 0;
  right: 0;
}
.iframe-box {
  height: 100%;
  width: 100%;
}
.iframe-html {
  height: 100%;
  width: 100%;
}
.iframe-box > iframe {
  height: 100%;
  width: 100%;
}
/* 银行卡icon类 */
.bank-icon-华夏银行 {
  background-image: url(../../assets/bankicon/华夏银行.png);
}
.bank-icon-交通银行 {
  background-image: url(../../assets/bankicon/交通银行.png);
}
.bank-icon-北京银行 {
  background-image: url(../../assets/bankicon/北京银行.png);
}
.bank-icon-工商银行 {
  background-image: url(../../assets/bankicon/工商银行.png);
}
.bank-icon-光大银行 {
  background-image: url(../../assets/bankicon/光大银行.png);
}
.bank-icon-建设银行 {
  background-image: url(../../assets/bankicon/建设银行.png);
}
.bank-icon-民生银行 {
  background-image: url(../../assets/bankicon/民生银行.png);
}
.bank-icon-农业银行 {
  background-image: url(../../assets/bankicon/农业银行.png);
}
.bank-icon-平安银行 {
  background-image: url(../../assets/bankicon/平安银行.png);
}
.bank-icon-中信银行 {
  background-image: url(../../assets/bankicon/中信银行.png);
}
.bank-icon-中国银行 {
  background-image: url(../../assets/bankicon/中国银行.png);
}
.bank-icon-上海浦东发展银行 {
  background-image: url(../../assets/bankicon/浦发银行.png);
}
.bank-icon-兴业银行 {
  background-image: url(../../assets/bankicon/兴业银行.png);
}
.bank-icon-邮政银行 {
  background-image: url(../../assets/bankicon/邮政银行.png);
}
.bank-icon-招商银行 {
  background-image: url(../../assets/bankicon/招商银行.png);
}

.icon-watermark-华夏银行 {
  background-image: url(../../assets/bankicon/华夏银行-watermark.png);
}
.icon-watermark-交通银行 {
  background-image: url(../../assets/bankicon/交通银行-watermark.png);
}
.icon-watermark-北京银行 {
  background-image: url(../../assets/bankicon/北京银行-watermark.png);
}
.icon-watermark-工商银行 {
  background-image: url(../../assets/bankicon/工商银行-watermark.png);
}
.icon-watermark-光大银行 {
  background-image: url(../../assets/bankicon/光大银行-watermark.png);
}
.icon-watermark-建设银行 {
  background-image: url(../../assets/bankicon/建设银行-watermark.png);
}
.icon-watermark-民生银行 {
  background-image: url(../../assets/bankicon/民生银行-watermark.png);
}
.icon-watermark-农业银行 {
  background-image: url(../../assets/bankicon/农业银行-watermark.png);
}
.icon-watermark-平安银行 {
  background-image: url(../../assets/bankicon/平安银行-watermark.png);
}
.icon-watermark-中信银行 {
  background-image: url(../../assets/bankicon/中信银行-watermark.png);
}
.icon-watermark-中国银行 {
  background-image: url(../../assets/bankicon/中国银行-watermark.png);
}
.icon-watermark-上海浦东发展银行 {
  background-image: url(../../assets/bankicon/浦发银行-watermark.png);
}
.icon-watermark-兴业银行 {
  background-image: url(../../assets/bankicon/兴业银行-watermark.png);
}
.icon-watermark-邮政银行 {
  background-image: url(../../assets/bankicon/邮政银行-watermark.png);
}
.icon-watermark-招商银行 {
  background-image: url(../../assets/bankicon/招商银行-watermark.png);
}
.dialog-demo {
  color: #626262;
}
.dialog-container {
  /* overflow: hidden; */
  box-sizing: border-box;
  position: relative;
  padding: 1rem;
  padding-bottom: 1.5rem;
}
.dialog-title {
  height: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  color: #1f1f1f;
  padding-bottom: 0.125rem;
}
.dialog-tips {
  height: 1.0625rem;
  line-height: 1.0625rem;
  font-size: 0.75rem;
  color: #aaaaaa;
  padding-bottom: 0.6875rem;
}
.verify-code {
  height: 2.5rem;
  padding: 1.2rem 0 2rem;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.verification-code-input {
  width: 90%;
  height: 2.5rem;
  box-sizing: border-box;
  border: 1px solid #aaaaaa;
  border-radius: 2px;
  overflow: hidden;
}
.submit-code {
  width: 16.6875rem;
  height: 2.8125rem;
  box-sizing: border-box;
  text-align: center;
  line-height: 2.8125rem;
  font-size: 0.9375rem;
  color: #ffffff;
  background-color: #8b4dbd;
  border-radius: 4px;
}
.foot-tips {
  padding-top: 1.375rem;
  line-height: 1rem;
  font-size: 0.75rem;
  color: #626262;
}
.vux-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-block;
  vertical-align: middle;
  color: #999;
  width: 24px;
  height: 24px;
}
.vux-close::before,
.vux-close::after {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 24px;
  height: 1px;
  background-color: currentColor;
  transform: rotate(-45deg);
}
.vux-close::after {
  transform: rotate(45deg);
}
.disabled-touch {
  opacity: 0.42;
}
</style>